<template>
  <div>
    <el-card style="width: 300px;height: 450px;">
      <div>
        <div>
          <!--          封面-->
          <div>
            <el-image :src="$img+props.userPostsItem.coverId" style="height: 260px;width: 260px"></el-image>
          </div>
        </div>
        <div>
          <b>
            {{ props.userPostsItem.title }}
          </b>
          <div>
            <el-text>{{ props.userPostsItem.description }}</el-text>
          </div>
        </div>
      </div>
      <div>
        <el-avatar :src="$img+props.userPostsItem.avatar" style="height: 30px;width: auto"></el-avatar>
        <div style="display: flex;justify-content: space-between">
          <div>
            <el-text size="small">
              {{ props.userPostsItem.userName }}
              {{ formatTime(props.userPostsItem.createTime) }}
            </el-text>
          </div>
          <div>
            <el-image  :src="require('@/assets/icon/love.png')" style="height: 20px;width: auto"></el-image>
             <el-text size="small">{{props.userPostsItem.loveCount}}</el-text>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>

import {computed} from "vue";

let props = defineProps(['userPostsItem'])

let formatTime = computed(() => {
  return (timeStr) => {
    let time = new Date(timeStr)
    return time.getFullYear() + "-" + time.getMonth() + "-" + time.getDay()
  }
})
</script>

<style scoped>

</style>
